<template>
	<div class="order_main">
		<div class="main_pdlr10">
			<el-form :inline="true" :model="formOrderSearch" class="orderFormMain " label-width='100px'>
		       
		        <el-form-item label="紧急程度">
							<el-select v-model="formOrderSearch.emergencyDegreeId" placeholder="全部">
								<el-option
									v-for="item in emergencyDegreeSelect"
									:key="item.paramValue"
									:label="item.paramName"
									:value="item.paramValue">
								</el-option>
							</el-select>
		        </el-form-item>
		       
		        <el-form-item label="处理人">
		          <el-input v-model="formOrderSearch.handelUserName" placeholder="处理人"></el-input>
		        </el-form-item>
		        

		        <el-form-item label="状态">
							<el-select v-model="formOrderSearch.WorkOrderState" placeholder="全部">
								<el-option
									v-for="item in WorkOrderStateSelect"
									:key="item.paramValue"
									:label="item.paramName"
									:value="item.paramValue">
								</el-option>
							</el-select>
		        </el-form-item>

		        <el-form-item label="创建时间">
		        	<el-date-picker
				       v-model="formOrderSearch.createStartTime"
				      type="datetime"
				      placeholder="开始时间">
				    </el-date-picker>
		       
		        	<el-date-picker
				       v-model="formOrderSearch.createEndTime"
				      type="datetime"
				      placeholder="结束时间">
				    </el-date-picker>
		        </el-form-item>

		        <el-form-item label="完成时间">
		        	<el-date-picker
				       v-model="formOrderSearch.completeStartTime"
				      type="datetime"
				      placeholder="开始时间">
				    </el-date-picker>
		       
		        	<el-date-picker
				       v-model="formOrderSearch.completeEndTime"
				      type="datetime"
				      placeholder="结束时间">
				    </el-date-picker>
		        </el-form-item>

		        <el-form-item class="sear_btnbox">
		          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
		          
		        </el-form-item>
		    </el-form>
	      <el-table
	        :data="orderallTable"
	        stripe
	        border
	        style="width: 100%" 
					v-loading="loading">
	        <el-table-column
	          type='index'
	          label="序号"
	          align='center'
	          width="50">
	        </el-table-column>
	        <el-table-column
	          prop="emergencyDegreeName"
	          label="紧急程度">
	        </el-table-column>
	        <el-table-column
	          prop="workOrderStateName"
	          label="状态">
	        </el-table-column>
	        <el-table-column
	          prop="workerOrderId"
	          label="工单ID">
	        </el-table-column>
	        <el-table-column
	          prop="workTypeName"
	          label="任务类型">
	        </el-table-column>
	        <el-table-column
	          prop="createUserName"
	          label="创建人">
	        </el-table-column>
	        <el-table-column
	          prop="createDate"
	          label="创建时间">
	        </el-table-column>
	        <el-table-column
	          prop="handleUserName"
	          label="处理人">
	        </el-table-column>
	        <el-table-column
	          prop="handleDate"
	          label="处理时间">
	        </el-table-column>
	        <el-table-column
	          fixed='right'
	          width="160"
	          align='center'
	          label="操作">
	            <template slot-scope="scope">
		            <el-button
						v-if="scope.row.workOrderState == 6 ? true : false"
		                size="mini"
		                type="success"
		                @click="handlePhone(scope.$index, scope.row)">回访</el-button>
		            
		            <el-button
						v-if="(scope.row.workOrderState == 0||scope.row.workOrderState == 1) ? true : false"
		                size="mini"
		                type="primary"
		                @click="handleAllot(scope.$index, scope.row)">分配</el-button>

		            <el-button
						v-if="(scope.row.workOrderState == 2 ||scope.row.workOrderState == 3 || scope.row.workOrderState == 4|| scope.row.workOrderState == 6) ? false : true"
		                size="mini"
		                type="danger"
		                @click="handleClose(scope.$index, scope.row)">关闭</el-button>

					<el-button
		                size="mini"
		                @click="handleLook(scope.$index, scope.row)">查看</el-button>
	            </template>
	        </el-table-column>
	      </el-table>

	      
	      <div class="block">
	        <el-pagination
	          @size-change="handleSizeChange"
		        @current-change="handleCurrentChange"
		        :current-page.sync="currentPageRask"
		        :page-sizes="[5, 10, 20, 30]"
		        :page-size="pageSizeRask"
		        layout="sizes, prev, pager, next"
		        :total="totalRask">
	        </el-pagination>
	      </div>
	  </div>
		

	</div>
</template>
<script>
	import {
		getWorkOrderList,
		pxbPhoneCallback,
	} from '@/api'
  export default {
    data() {
      return {
				formOrderSearch: {//查询条件
					workTypeId:'',       //工单类型id
					emergencyDegreeId:'',//紧急程度id
          createUserName:'',   //创建人姓名
					handelUserName:'',   //处理人姓名
					customerName:'',     //联系人员姓名
					WorkOrderState:'',   //处理状态
					createStartTime:'',  //创建时间 开始
					createEndTime:'',    //创建时间 结束
					completeStartTime:'',//完成时间 开始
					completeEndTime:'',  //完成时间 结束
				},
				emergencyDegreeSelect:[],//紧急程度select
				emergencyDegreeSelectAll:[],//添加全部的紧急程度select
				WorkOrderStateSelect:[], //处理状态select
				WorkOrderStateSelectAll:[],//添加全部的处理状态select
				orderallTableDate:[],//表格内容
				loading: true,//加载器
				totalRask: null,// 分页总条数
				pageSizeRask:10, //当前分页一页多少条数
				currentPageRask:1,//当前页数
      };
		},
		created () {
			let dictionaryValue = JSON.parse(sessionStorage.getItem('dictionaryValue'));
			dictionaryValue.map((item, index) =>{
				//紧急程度select
				if(item.typeValue == 'emergency_degree'){
					this.emergencyDegreeSelectAll = item.paramParamList;//为了添加全部的字段,复制数组,添加全部的数据
					this.emergencyDegreeSelect = this.emergencyDegreeSelectAll
					this.emergencyDegreeSelect.unshift({paramName: "全部",paramValue: ""})
				}
				//处理状态select
				if(item.typeValue == 'workerorder_status'){
					this.WorkOrderStateSelectAll = item.paramParamList;
					this.WorkOrderStateSelect = this.WorkOrderStateSelectAll
					this.WorkOrderStateSelect.unshift({paramName: "全部",paramValue: ""})
				}
			})
			let params = {
					workTypeId: this.formOrderSearch.workTypeId,
					emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
					createUserName: this.formOrderSearch.createUserName,
					handelUserName: this.formOrderSearch.handelUserName,
					customerName: this.formOrderSearch.customerName,
					WorkOrderState: this.formOrderSearch.WorkOrderState,
					createStartTime: new Date(this.formOrderSearch.createStartTime).getTime(), 
					createEndTime: new Date(this.formOrderSearch.createEndTime).getTime(),
					completeStartTime: new Date(this.formOrderSearch.completeStartTime).getTime(),
					completeEndTime: new Date(this.formOrderSearch.completeEndTime).getTime(),
					page:this.currentPageRask, //每页显示个数 (默认为10)
					size:this.pageSizeRask,    //当前页数(默认为1)
					type:'1'             // 类别（1:我创建，2:待处理，0:全部）
				}
			this.workOrderList(params)     //调用查询
		},
    methods:{
			getDate (item) {
				var date =  new Date(item);
				var y = 1900+date.getYear();
				var m = "0"+(date.getMonth()+1);
				var d = "0"+date.getDate();
				return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length)
			},
			onSubmit() {      //查询按钮
				let params = {
					workTypeId: this.formOrderSearch.workTypeId,
					emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
					createUserName: this.formOrderSearch.createUserName,
					handelUserName: this.formOrderSearch.handelUserName,
					customerName: this.formOrderSearch.customerName,
					WorkOrderState: this.formOrderSearch.WorkOrderState,
					createStartTime: new Date(this.formOrderSearch.createStartTime).getTime(), 
					createEndTime: new Date(this.formOrderSearch.createEndTime).getTime(),
					completeStartTime: new Date(this.formOrderSearch.completeStartTime).getTime(),
					completeEndTime: new Date(this.formOrderSearch.completeEndTime).getTime(),
					page: this.currentPageRask, //每页显示个数 (默认为10)
					size: this.pageSizeRask,    //当前页数(默认为1)
					type: '1'             // 类别（1:我创建，2:待处理，0:全部）
				}
				this.workOrderList(params)
			},
			//分配按钮
    		handleAllot(index, row) {
				this.dialogAllot = true//分配form弹出框
				// this.houseId = row.houseId  // 处理人编号
				this.workTypeId = row.workerOrderId // 工单id
				this.equipmentIds = row.equipmentIds // 设备id
	      	},
		    handleLook(index, row) {//查看
				this.$router.push({
					path: '/home/orderdetails',
					query: {
						id: row.workerOrderId
					}
				})
		    },
		     handleClose(index, row) {//关闭
				let params = {
					handelUserId: row.houseId, // 处理人编号
					workOrderId: row.workerOrderId, // 工单id
					status: 4
				}
				this.workOrderStatus(params)
			},
      // 回访开始
	      	handlePhone(index,row){//回访按钮
	      		this.dialogHandle=true
	      		let params = {
			  		device: sessionStorage.getItem('device'),
			  		called: row.phone//列表没有电话号码
			  	}
			  	this.phoneCallback (params)
	      	},
			trueHandleBtn(){//确定添加回访数据
				// getWorkOrderList(params).then(res => {   
				// 	let code = res.data.code;
				// 	if(code == 0){
				// 		let data = res.data.data;
						
				// 		this.$message({
				// 			message: '添加回访记录成功'
				// 		})
				// 	}else if(code == 1){
				// 		this.$message({
				// 			message: res.data.msg
				// 		})
				// 	}
				// })
			},
			phoneCallback (params) { //调入呼出电话接口(立即回拨)
			  	pxbPhoneCallback (params).then(res => {
					let code = res.data.code;
					if(code == 0){
						// this.$router.push({
						// 	path: '/home/oncall',
						// 	query: {
						// 		callPhone: this.callPhone
						// 	}
						// })
						// bus.$emit('hideEvent', true)
						this.$message({
							message: '呼出成功,请填写回访记录'
						})
					}else if(code == 1){
						this.$message({
							message: '分机号错误!'
						})
					}else if(code == 2){
						this.$message({
							message: '被叫号错误!'
						})
					}
					else if(code == 3){
						this.$message({
							message: '呼叫失败!'
						})
					}
					
				});
			},
	//回访结束 
			workOrderStatus(params){    //工单状态修改接口（）
				workOrderStatus(params).then(res => {   
					let code = res.data.code;
					if(code == 0){
						let params = {
							workTypeId: this.formOrderSearch.workTypeId,
							emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
							createUserName: this.formOrderSearch.createUserName,
							handelUserName: this.formOrderSearch.handelUserName,
							customerName: this.formOrderSearch.customerName,
							WorkOrderState: this.formOrderSearch.WorkOrderState,
							createStartTime: new Date(this.formOrderSearch.createStartTime).getTime(), 
							createEndTime: new Date(this.formOrderSearch.createEndTime).getTime(),
							completeStartTime: new Date(this.formOrderSearch.completeStartTime).getTime(),
							completeEndTime: new Date(this.formOrderSearch.completeEndTime).getTime(),
							page: this.currentPageRask, //每页显示个数 (默认为10)
							size: this.pageSizeRask,    //当前页数(默认为1)
							type:'1'                   // 类别（1:我创建，2:待处理，0:全部）
						}
						this.workOrderList(params)
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			workOrderList(params){    //查询接口                 
				getWorkOrderList(params).then(res => {   
					let code = res.data.code;
					if(code == 0){
						let data = res.data.data;
						this.totalRask = data.pageInfo.total
						this.orderallTableDate = data.list
						this.loading = false
					}else if(code == 1){
						this.$message({
							message: res.data.msg
						})
					}
				})
			},
			handleSizeChange(val) {
				this.pageSizeRask = val
				this.currentPageRask = 1
				let params = {
					workTypeId: this.formOrderSearch.workTypeId,
					emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
					createUserName: this.formOrderSearch.createUserName,
					handelUserName: this.formOrderSearch.handelUserName,
					customerName: this.formOrderSearch.customerName,
					WorkOrderState: this.formOrderSearch.WorkOrderState,
					createStartTime: new Date(this.formOrderSearch.createStartTime).getTime(), 
					createEndTime: new Date(this.formOrderSearch.createEndTime).getTime(),
					completeStartTime: new Date(this.formOrderSearch.completeStartTime).getTime(),
					completeEndTime: new Date(this.formOrderSearch.completeEndTime).getTime(),
					page:this.currentPageRask, //每页显示个数 (默认为10)
					size:this.pageSizeRask,    //当前页数(默认为1)
					type:'1'             // 类别（1:我创建，2:待处理，0:全部）
				}
				this.workOrderList(params)     //调用查询
			},
			handleCurrentChange(val) {
				this.currentPageRask = val
				let params = {
					workTypeId: this.formOrderSearch.workTypeId,
					emergencyDegreeId: this.formOrderSearch.emergencyDegreeId,
					createUserName: this.formOrderSearch.createUserName,
					handelUserName: this.formOrderSearch.handelUserName,
					customerName: this.formOrderSearch.customerName,
					WorkOrderState: this.formOrderSearch.WorkOrderState,
					createStartTime: new Date(this.formOrderSearch.createStartTime).getTime(), 
					createEndTime: new Date(this.formOrderSearch.createEndTime).getTime(),
					completeStartTime: new Date(this.formOrderSearch.completeStartTime).getTime(),
					completeEndTime: new Date(this.formOrderSearch.completeEndTime).getTime(),
					page:this.currentPageRask, //每页显示个数 (默认为10)
					size:this.pageSizeRask,    //当前页数(默认为1)
					type:'1'             // 类别（1:我创建，2:待处理，0:全部）
				}
				this.workOrderList(params)     //调用查询
			}
		},
		computed: {
			orderallTable () {
				return this.orderallTableDate.map(v => {
					return {
						createDate: this.getDate(v.createDate),
						createUserId: v.createUserId,
						createUserName: v.createUserName,
						emergencyDegreeId: v.emergencyDegreeId,
						emergencyDegreeName: v.emergencyDegreeName,
						equipmentIds: v.equipmentIds,
						handleDate: this.getDate(v.handleDate),
						handleUserId: v.handleUserId,
						handleUserName: v.handleUserName,
						houseId: v.houseId,
						workOrderState: v.workOrderState,
						workOrderStateName: v.workOrderStateName,
						workTypeId: v.workTypeId,
						workTypeName: v.workTypeName,
						workerOrderId: v.workerOrderId
					}
				})
			}
		}
  };
</script>
<style scoped>
 .order_main{padding-top:10px;}
</style>